<template>
    <div class="echarts-root">
        <div :id="ecahrtId" style="width: 100%;" :style="{ height: cHeight }"></div>
    </div>
</template>

<script setup>
//圆角、中心空白的饼图
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const ecahrtId = 'pieEcharts' + Math.floor(Math.random() * 10000);

const props = defineProps({
    // 图表高度，带单位
    cHeight: {
        type: String,
        default: '230px',
    },
    title: {
        type: String,
        default: '',
    },
    tag: {
        type: String,
        default: '',
    },
    noCenterTxt: {
        type: Boolean,
        default: false,
    },
    datas: {
        type: Array,
        default: () => {
            return []
        }
    }
});

watch(() => props.datas, value => initEcharts(value))

//图表对象
const echartsObj = ref(null);

//初始化图表
const initEcharts = (seriesDatas = []) => {
    if (echartsObj.value == null) {
        echartsObj.value = echarts.init(document.getElementById(ecahrtId));
    }
    let isShowLabel = true
    if (!seriesDatas) {
        seriesDatas = []
    } else if (seriesDatas.length > 0) {
        if (seriesDatas[0].label) {
            isShowLabel = false
        }
    }
    let option = {
        title: {
            text: props.title,
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                let objData = params.data
                let result = (objData.name || '')
                    + '<br/>' + (props.tag ? props.tag : '数量') + '：' + (objData.value || '0')
                    + '<br/>占比：' + (params.percent || '0') + '%';
                return result;
            }
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            show: false
        },
        grid: {
            top: 110,
            left: 40,
            right: 40,
            bottom: 20
        },
        series: [{
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            data: seriesDatas,
            label: {
                show: isShowLabel,
                normal: {
                    show: true,
                    formatter: '{b}\n' + (props.tag ? props.tag : '数量') + ':{c}'
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    echartsObj.value.setOption(option);

    window.addEventListener('resize', () => {
        if (echartsObj.value) {
            echartsObj.value.resize()
        }
    })
}

onMounted(() => {
    initEcharts()
})

</script>

<style lang="scss" scoped>
.echarts-root {
    position: relative;
    width: 100%;
    height: 100%;

    .total-div {
        position: absolute;
        top: 36%;
        left: 50%;
        z-index: 11;
        width: 120px;
        height: 70px;
        margin-left: -60px;
        text-align: center;
        border-radius: 10px;

        .total {
            font-size: 30px;
            color: #000;
        }

        .tag {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
    }
}
</style>